{{Template:SZPT-CHINA/head}}
<html>

<head>
    <!-- <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maixmum-scale=1.0,minimum-scale=1.0,user-scalable=no"> -->
</head>

<script>
    //BEGIN-loading
    var loadhidekey = 0;
    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();
        if (loadhidekey == 0) {
            setTimeout(function () {
                //$("#loaderDownId").hide();
                //滑到顶部
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                $("#loadingHome").hide();
                document.body.append(document.getElementById('head'))
                // $("#loading").hide();
            }, 10);

        }
        else if (loadhidekey == 0) {
            //视频没加载好
            loadhidekey = 1;
        }
    }
// 视频加载好
// function hideLoad() {
//     console.log("视频加载好了", loadhidekey)

//     if (loadhidekey == 1) {
//         setTimeout(function () {
//             //$("#loaderDownId").hide();
//             $("#loadingHome").hide();
//             //$("#loading").hide();
//         }, 10);
//     }
//     else if (loadhidekey == 0) {
//         loadhidekey = 1;
//     }
// }
//END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>

    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", p);
        $("#bg1").attr("style", bg);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Attributions";
        });
    });
</script>
<script>

</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: 0px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 10%;width: auto;left: 40%;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div class="mainImg">
        <div>
            <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p1" src="https://2021.igem.org/wiki/images/f/f5/T--SZPT-CHINA--team-members2.0.png"
                    class="smallImg"></image>
            </div>
            <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                <image id="p2" src="https://2021.igem.org/wiki/images/b/b2/T--SZPT-CHINA--team-attributions2.0.png"
                    class="smallImg"></image>

            </div>
            <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p3" src="https://2021.igem.org/wiki/images/b/bf/T--SZPT-CHINA--team-collaborations2.0.png"
                    class="smallImg"></image>
            </div>
            <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                <image id="p4" src="https://2021.igem.org/wiki/images/5/5a/T--SZPT-CHINA--team-partnership2.0.png"
                    class="smallImg"></image>
            </div>
        </div>
        <div style="z-index: 99;position: absolute;">
            <image src="https://2021.igem.org/wiki/images/8/8c/T--SZPT-CHINA--team-members.png"
                style="margin-top: -50px;margin-left: 550px;"> </image>
        </div>
        <div style="margin-top: 50px;">
            <div id="m1" style="width: 25%;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
            <div id="m2" style="width: 25%;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 24%;">
            </div>
            <div id="m3" style="width: 25%;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 49%;">
            </div>
            <div id="m4" style="width: 25%;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 74%;">
            </div>
        </div>
    </div>
    <!-- down -->
    <div style="width: 1920px;">
        <div style="float:left; height: 500px; width: 55px;background-color: #2588d4;">
        </div>
        <div class="directory" style="float:left">
            <div style="margin-top: 100px;background-color: #f2756f;margin-left: 160px;border-radius:10px;">
                <div
                    style="background-color: #f2756f;width: 200px;height: 40px;border-top-right-radius:6px;border-top-left-radius :10px;">
                    <p style="color:white; text-align:center;font-size: 160%;padding-top: 10px;">Lorem Ipsum</p>
                </div>
                <div style="background-color: #eb5650;border-radius:6px;height: 60px;">
                    <p style="color:white;text-align:center;font-size: 160%;padding-top: 15px;">Lorem Ipsum</p>
                </div>

                <div style="background-color: #f2756f;width: 200px;height: 40px;border-top-right-radius:6px;">
                    <p style="color:white;text-align:center;font-size: 160%;"> Lorem Ipsum</p>
                </div>
                <!-- <div style="background-color: #eb5650;height: 4px;"></div> -->
                <div style="background-color: #f2756f;width: 200px;height: 40px;border-top-right-radius:6px;">
                    <p style="color:white;text-align:center;font-size: 160%;">Lorem Ipsum</p>
                </div>
                <!-- <div style="background-color: #eb5650;height: 4px;"></div> -->
                <div
                    style="background-color: #f2756f;width: 200px;height: 40px;border-bottom-right-radius:10px;border-bottom-left-radius:10px;">
                    <p style="color:white;text-align:center;font-size: 160%;"> Lorem Ipsum</p>
                </div>
            </div>
        </div>
        <div class="content" style="float:left;width: 1310px;">
            <div style="padding: 20px;">
                <div>
                    <h1> ● Overview</h1>
                    <p style="font-size: 160%;">The situation of Pseudomonas aeruginosa drug resistance is an urgent
                        issue.
                        铜绿假单胞菌耐药形势严峻，迫切需要新型药物来对抗它。
                        作为六大病原体之一的铜绿假单胞菌，2017年WHO将其列为迫切需要开发新型药物之一。
                        我们的目标是帮助烧伤感染患者降低感染铜绿假单胞菌的风险，减少伤口的疼痛，促进伤口的愈合。为了将我们的项目落实到现实中，我们对此做出了努力。</p>
                </div>

                <div>
                    <p style="font-size: 160%;">
                        患有铜绿假单胞菌感染无法治愈的人:严重的烧伤容易使患者感染铜绿假单胞菌，烧伤感染带来的并发症导致治疗周期、治疗费用和患者痛苦的增加，我们的项目为患者提供新的安全可靠的治疗方案，缩短烧伤治疗时间，减轻患者的痛苦和患者的经济负担。
                    </p>
                </div>
                <div>
                    <p style="font-size: 160%;">
                        无能为力并试图治愈患者的医疗人员：烧伤感染致病菌之一铜绿假单胞菌，它有极强的耐药产生机制以及多重耐药性。然而目前的烧伤感染治疗方法是使用抗生素，抗生素的滥用使得铜绿假单胞菌耐药性的问题一直存在。我们的产品可替代抗生素治疗患者，为医疗人员提供新的治疗方法来解决抗生素的问题。
                    </p>
                </div>
                <div>
                    <p style="font-size: 160%;"> 试图找到创新解决方案的研究人员：抗生素的应用范围很广，许多疾病都需要用到抗生素，抗生素耐药性问题已经能够导致每年大约 70 万人死亡。
                    </p>
                </div>
            </div>
        </div>
        <div style="float: left;margin-left: 140px; height: 500px;width: 55px;background-color: #d44225;">
        </div>
    </div>
</body>
<style>
    /* 标志图 */
    .smallImg {
        height: 480px;
        float: left;
    }

    /* 标志图外框 */
    .mainImg {
        width: 1920px;
        height: 480px;
    }
</style>
<!-- BEGIN-适配 -->
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 2500;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>